<template>
	<view>
		<view class="container">
			<up--image :show-loading="true" :src="previewImage.preview_url" :width="imgWeight"
				:height="imgHeight"></up--image>
		</view>
		<view class="box2" v-if="type==='1'">
			<view style="display: flex;">
				<view class="mini" style="padding: 40rpx;font-size: 30rpx;">背景色</view>
				<up-radio-group v-model="form.color" @change="getIsCOLOR">
					<view v-for="(item, index) in detail.abackground.split('、')" :key="index">
						<view v-if="isShowColor(item)" class="dy">
							<div style="margin-top: 30rpx;margin-left: 5rpx;">
								<up-radio :name="item">
								</up-radio>
							</div>

							<view class="cor1" :style="{background:[item]}">
							</view>
						</view>
					</view>
				</up-radio-group>

			</view>
		</view>

		<view v-if="type==='2'" class="box2">
			<view v-for="item in clothingList" class="fz" :class="activeKey === item? 'select' : ''"
				@click="getActiveKey(item)">
				<up--image :src="item.fileUrl" width="70rpx" height="70rpx">
				</up--image>
			</view>

		</view>
		<view style="display: flex;margin-top: 50rpx;">
			<up-button text="背景" size="normal" type="info" plain @click="clickSubmit('1')"></up-button>
			<up-button text="换装" size="normal" type="info" plain style="margin-left: 50rpx;" @click="clickSubmit('2')">

			</up-button>
		</view>

		<view style="width: 90%;margin:auto;margin-top: 30rpx;">
			<up-button type="primary" text="下载电子照" @click="dowloadFile"></up-button>
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue"
	import {
		onShow,
		onHide,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		func
	} from "uview-plus/libs/function/test";
	const {
		proxy
	} = getCurrentInstance();
	// 可操作的颜色
	const showColor = ref(['blue', 'white', 'red'])
	//判断是否选中
	const activeKey = ref("")
	// 类型 1 为背景 2 为换装
	const type = ref("1")
	const form = ref({
		color: "blue"
	})
	const current = ref(0);
	const list = ref(['背景', '换装']);
	// 单页详情
	const detail = ref({})
	// 传输过来的图片
	const imgSrcBase64 = ref("")
	//所有操作的颜色界面
	const documentsList = ref([])
	//展示的图片对象
	const previewImage = ref({})
	//所有服装列表
	const clothingList = ref([])
	const imgWeight = ref("")
	const imgHeight = ref("")
	//下载所需要的信息
	const dowloadImg = ref({})
	onLoad((option) => {
		detail.value = JSON.parse(option.detail)
		imgWeight.value = detail.value.sizePx.substring(0, 3) + "rpx"
		imgHeight.value = detail.value.sizePx.substring(4, 7) + "rpx"
		console.log("打印一下宽度", imgWeight.value);
		console.log("打印一下高度", imgHeight.value);
		imgSrcBase64.value = option.imgSrc
		// 读取文件， base64 格式
		const fs = uni.getFileSystemManager();
		let base64Str = fs.readFileSync(imgSrcBase64.value, 'base64');
		let imgBase64 = `data:image/png;base64,${base64Str}`
		imgSrcBase64.value=imgBase64
		getDocuments()
		
	})
	
	function getDocuments(){
		//初始化
		var data = {
			colors: "blue",
			file: imgSrcBase64.value,
			spec_id: detail.value.itemId
		}
		proxy.$rqt.genDocuments(data).then(res => {
			if(res.data.code!=200){
				uni.showLoading({
					title: res.data.msg
				});
				
				setTimeout(function () {
					uni.hideLoading();
				}, 2000);
				
			}
			documentsList.value = res.data.data.filenames
			previewImage.value = documentsList.value.find(r => r.color_name === data.colors)
		})
		
	}

	function isShowColor(item) {
		return showColor.value.includes(item);
	}
	//切换背景
	function getIsCOLOR(e) {
		previewImage.value = documentsList.value.find(r => r.color_name === e)
	}

	function getActiveKey(item) {
		activeKey.value = item
		//换装
		let data = {
			// 证件照图片名称
			img_name: previewImage.value.img_name,
			clothes_id: item.id,
			bg_color: previewImage.value.bg_color
		}
		proxy.$rqt.submitReloading(data).then(res => {
			previewImage.value.preview_url = res.data.data.preview_url
		})

	}

	//切换主题
	function clickSubmit(types) {
		if(types==='1'){
			getDocuments()
		}
		type.value = types
	}

	//查看所有服装
	function allClothing() {
		proxy.$rqt.selectPhotoList().then(res => {
			console.log("查看所有服装啊", res);
			clothingList.value = res.data
		})

	}

	//下载
	function dowloadFile() {
		let data={
			type:type.value,
			imgName:previewImage.value.img_name
		}
		proxy.$rqt.downloadFileUrl(data).then(res=>{
			uni.downloadFile({
				url:"https://license.zwfwpt.cn/cc-api"+res.data,
				success(suc) {
					console.log("进入了下载啊");
						uni.saveFile({
							tempFilePath:suc.tempFilePath,
							success(res) {
								console.log("下载成功");
							},fail(err) {
								console.log("下载失败",err);
							}
					})
				}
			})
	})

		}

		allClothing();
</script>

<style scoped>
	.fz {
		width: 100rpx;
		height: 100rpx;
		margin-left: 30rpx;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}


	.cor1 {
		width: 40rpx;
		height: 40rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
	}

	.mini {
		font-size: 24rpx;
		color: gray;
	}

	.dy {
		display: flex;
		justify-content: flex-end;
		/* flex-direction: row-reverse; */
	}

	.box2 {
		/* background-color: #F6F7FB; */
		/* height: 500rpx; */
		margin-top: 100rpx;
		display: flex;
		overflow: auto
	}

	.select {
		position: relative;
		text-align: left;
		color: #00aaff;
		background-color: #fff;
		box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(85, 110, 97, 0.35);
		border-radius: 5rpx;
		border: 1rpx solid #00aaff;
	}

	.select:before {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		border: 10px solid #00aaff;
		border-top-color: transparent;
		border-left-color: transparent;
	}
</style>